<template>
    <div class="loginBody">
        <div class="loginDiv">
            <div class="login-content">
                <h1 class="login-title">用户登录</h1>
                <el-form :model="loginForm" label-width="100px" :rules="rules" ref="loginForm">
                    <el-form-item label="账号" prop="account">
                        <el-input width=50px style="..." type="text" v-model="loginForm.account" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input style="..." type="password" v-model="loginForm.password" show-password autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="confirm" :disabled="confirm_disabled">确认</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="register">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Login',
  data(){
      return{
          confirm_disabled:false,
          loginForm:{
              account:'',
              password:''
          },
          rules:{
              account:[{required:true,message:'请输入账号',trigger:'blur'}],
              password:[{required:true,message:'请输入密码',trigger:'blur'}]
          }
      }
  },

  methods:{
      confirm(){
          this.confirm_disabled=true;
          this.$refs.loginForm.validate((valid)=>{
              if(valid){
                  this.$axios.post('http://localhost:8090/login',this.loginForm).then(res=>res.data).then(res=>{
                       console.log(res)
                      if(res.code==200){
                        //   存储
                          localStorage.setItem("CurUser",JSON.stringify(res.data.user))
                          localStorage.setItem("token",res.data.token)
                          console.log(res.data.user)
                          if (res.data.user.roleId === 2){
                              console.log(res.data.doctor);
                          }
                          if (res.data.user.roleId === 3){
                              console.log(res.data.patient);
                          }
                          console.log(res.data.menu)
                          // this.$store.commit("setMenu",res.data.menu)
                          localStorage.setItem("setMenu",JSON.stringify(res.data.menu))
                        //   跳转主页
                          this.$router.replace('/');
                      }else{
                          this.confirm_disabled=false;
                          alert('账号或密码错误');
                          return false;
                      }
                  });
              }else{
                  this.confirm_disabled=false;
                  console.log('失败');
                  return false;

              }
          });
      },
      register(){
          this.$router.replace('/register');
      }
  }
  
}
</script>


<style scoped>
    /* 背景 */
    .loginBody{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #B3C0D1;
    }
    /* 登录框 */
    .loginDiv{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 450px;
        height: 330px;
        background: #fff;
        border-radius: 5%;
    }
    .login-title{
        margin: 20px 0;
        text-align: center;
    }
    .login-content{
        width: 350px;
        height: 250px;
        position: absolute;
        top: 25px;
        left: 25px;

    }

</style>
